<template>
  <div class="app-container home">
    <div class="station-top">
      <el-row :gutter="12" class="mt5">
        <el-col :span="6">
          <div class="top-item-box item-box-one" style="display: flex;">
            <div style="flex:2;height:100%;">
              <div>待入库</div>
              <div style="text-align:center;margin-top:30px;"><span style="font-size:26px;font-weight:bold;">{{ receiptTotal }}</span>
              </div>
            </div>
            <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
              <div>生产入库：{{ receiptStats.production }}</div>
              <div>采购入库：{{ receiptStats.purchase }}</div>
              <div>退货入库：{{ receiptStats.return }}</div>
              <div>归还入库：{{ receiptStats.restore }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-item-box item-box-two" style="display: flex;">
            <div style="flex:2;height:100%;">
              <div>待出库</div>
              <div style="text-align:center;margin-top:30px;"><span style="font-size:26px;font-weight:bold;">{{ shipmentTotal }}</span></div>
            </div>
            <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
              <div>退货出库：{{ shipmentStats.return }}</div>
              <div>销售出库：{{ shipmentStats.sales }}</div>
              <div>生产出库：{{ shipmentStats.production }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-item-box item-box-three" style="display: flex;">
            <div style="flex:2;height:100%;">
              <div>其他</div>
              <div style="text-align:center;margin-top:30px;"><span style="font-size:26px;font-weight:bold;"
              >0</span></div>
            </div>
            <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
              <div>待截单：0</div>
              <div>异常单：0</div>
              <div>今日到货：0</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-item-box item-box-four" style="display: flex;">
            <div style="flex:2;height:100%;">
              <div>库存统计</div>
              <div style="text-align:center;margin-top:30px;"><span style="font-size:26px;font-weight:bold;">{{ inventoryTotal }}</span>
              </div>
            </div>
            <div style="flex:3;display: flex;flex-direction:column;justify-content:space-evenly">
              <div v-for="(item, index) in inventoryPieData.slice(0, 3)" :key="index">
                {{ item.name }}：{{ item.value }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="station-middle">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-card class="box-card" shadow="never">
            <div class="card-title">仓库货物占比</div>
            <div style="height: calc(100% - 30px);">
              <StationPie height="100%" :pieData="inventoryPieData"></StationPie>
              <div></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card" shadow="never">
            <div style="display:flex;justify-content: space-between;align-items: center;">
              <div class="card-title">有效入库趋势</div>
              <el-radio-group v-model="tabPosition" @change="dateChange">
                <!-- <el-radio-button label="day">当日</el-radio-button> -->
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">今年</el-radio-button>
              </el-radio-group>
            </div>
            <div style="height: calc(100% - 30px);">
              <StationBar height="100%" :chartData="barChartData" :xName="barXName"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="station-bottom">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-card class="box-card" shadow="never">
            <div class="card-title">近7日有效销售出库</div>
            <div style="height: calc(100% - 30px);">
              <StationLine height="100%" itemColor="#ee4368" yName="件" :chartData="lineDataOne"/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="never">
            <div class="card-title">近7日有效生产入库</div>
            <div style="height: calc(100% - 30px);">
              <StationLine height="100%" :chartData="lineDataTwo" yName="件" itemColor="#5470c6"/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="never">
            <div class="card-title">近7日有效移库</div>
            <div style="height: calc(100% - 30px);">
              <StationLine height="100%"  :chartData="lineDataThree" yName="件"
                           itemColor="#c58bea"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="never">
            <div class="card-title">近7日有效采购入库</div>
            <div style="height: calc(100% - 30px);">
              <StationLine height="100%" yName="件" :chartData="lineDataFour"
                           itemColor="#c7a428"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import StationPie from './components/StationPie.vue'
import StationLine from './components/StationLine.vue'
import StationBar from './components/StationBar.vue'
import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
import moment from 'moment';
import {
  receiptOrderStatistics,
  shipmentOrderStatistics,
  queryWarehouseInventoryStatistics,
  inAndOutOrderTrend
} from '@/api/wms/charts'

const tabPosition = ref('month')
const barChartData = ref({
  yData: [79, 68, 56, 72, 51, 63, 67, 71, 58, 81, 64, 77, 56, 69]
})
const barXName = ref('日')
const lineDataOne = ref({
  yData: [79, 65, 21, 67, 21, 89, 56],
})
const lineDataTwo = ref({
  yData: [45, 72, 16, 37, 64, 28, 46],
})
const lineDataThree = ref(
  {
    yData: [16, 27, 37, 16, 27, 21, 11],
  }
)
const lineDataFour = ref({
  yData: [134, 107, 94, 173, 37, 143, 86],
})

// API数据存储
const receiptOrderData = ref([])
const shipmentOrderData = ref([])
const inventoryData = ref([])

// 库存饼图数据
const inventoryPieData = ref([
  { value: 0, name: "暂无数据" }
])

// 入库统计数据
const receiptStats = ref({
  production: 0,    // 生产入库
  purchase: 0,      // 采购入库
  return: 0,        // 退货入库
  restore: 0        // 归还入库
})

// 出库统计数据
const shipmentStats = ref({
  return: 0,        // 退货出库 optType: 1
  sales: 0,         // 销售出库 optType: 2
  production: 0     // 生产出库 optType: 3
})

// 计算入库总数
const receiptTotal = computed(() => {
  return receiptStats.value.production +
         receiptStats.value.purchase +
         receiptStats.value.return +
         receiptStats.value.restore
})

// 计算出库总数
const shipmentTotal = computed(() => {
  return shipmentStats.value.return +
         shipmentStats.value.sales +
         shipmentStats.value.production
})

// 计算库存总数
const inventoryTotal = computed(() => {
  return inventoryPieData.value.reduce((total, item) => total + item.value, 0)
})

onMounted((()=>{
  initTime();
  dateChange('month');
  // 调用API获取数据
  getReceiptOrderData();
  getShipmentOrderData();
  getInventoryData();
  // 获取近7日趋势数据
  getWeeklyTrendData();
  // 启动自动刷新
  startAutoRefresh();
}))

// 组件卸载前清理定时器
onBeforeUnmount(() => {
  stopAutoRefresh()
})

// 时间类型选择
async function dateChange(value) {
  // 设置默认数据（如果API调用失败时使用）
  let date = new Date()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let barXData = []
  let barYData = []

  if(value === 'year') {
    for(let i = 0; i < month; i++) {
      barXData.push(moment().subtract(i, 'months').format('YYYY-MM'))
      barYData.push(Math.floor(Math.random()*(180-120+1))+120)
    }
    barXName.value = '月'
  } else {
    // 修复：只生成到今天为止的数据，不包含未来日期
    for(let i = day - 1; i >= 0; i--) {
      barXData.push(moment().subtract(i, 'days').format('MM-DD'))
      barYData.push(Math.floor(Math.random()*(30-15+1))+15)
    }
    barXName.value = '日'
  }

  // 设置默认数据
  barChartData.value = {
    xData: barXData,
    yData: barYData
  }

  // 调用API获取真实数据
  try {
    const granularity = value === 'year' ? 1 : 0  // 0:按天 1:按月
    const data = await getOrderTrendData(0, granularity, 0, 1)  // orderType=0:入库

    if (data && data.data && Array.isArray(data.data)) {
      console.log('趋势数据:', data.data)

      // 处理API返回的数据
      if (value === 'year') {
        // 本年数据 - 按月统计
        processYearData(data.data)
      } else {
        // 本月数据 - 按日统计
        processMonthData(data.data)
      }
    } else {
      console.warn('趋势数据为空或格式错误，使用默认数据')
    }
  } catch (error) {
    console.error('获取趋势数据失败:', error)
  }
}
// 初始化时间模拟数据
function initTime() {
  let lineXData = []
  for(let i = 0; i < 7; i++) {
    lineXData.push(moment().subtract(i, 'days').format('MM-DD'))
  }
  lineXData = lineXData.reverse()
  lineDataOne.value.xData = lineXData
  lineDataTwo.value.xData = lineXData
  lineDataThree.value.xData = lineXData
  lineDataFour.value.xData = lineXData
}

// 获取近7日趋势数据
async function getWeeklyTrendData() {
  try {
    console.log('开始获取近7日趋势数据...')

    // 并行获取四个图表的数据
    const results = await Promise.allSettled([
      getSalesOutboundData(),    // 销售出库
      getProductionInboundData(), // 生产入库
      getMovementData(),         // 移库
      getPurchaseInboundData()   // 采购入库
    ])

    // 检查每个请求的结果
    results.forEach((result, index) => {
      const apiNames = ['销售出库', '生产入库', '移库', '采购入库']
      if (result.status === 'rejected') {
        console.error(`${apiNames[index]}数据获取失败:`, result.reason)
      } else {
        console.log(`${apiNames[index]}数据获取成功`)
      }
    })

    console.log('近7日趋势数据获取完成')
  } catch (error) {
    console.error('获取近7日趋势数据失败:', error)
  }
}

// 获取入库单统计数据
async function getReceiptOrderData() {
  try {
    const response = await receiptOrderStatistics()
    console.log('入库单统计数据:', response)

    // 验证响应数据
    if (!response) {
      console.warn('入库单统计数据响应为空')
      return
    }

    if (response.code !== 200) {
      console.warn('入库单统计数据请求失败:', response.msg || '未知错误')
      return
    }

    // 验证数据格式
    if (!response.data) {
      console.warn('入库单统计数据为空')
      return
    }

    if (!Array.isArray(response.data)) {
      console.warn('入库单统计数据格式错误，期望数组格式')
      return
    }

    receiptOrderData.value = response.data

    // 重置统计数据
    receiptStats.value = {
      production: 0,  // 生产入库 optType: 1
      purchase: 0,    // 采购入库 optType: 2
      return: 0,      // 退货入库 optType: 3
      restore: 0      // 归还入库 optType: 4
    }

    // 遍历API返回的数据，根据optType更新对应的统计
    response.data.forEach((item, index) => {
      // 验证每个数据项
      if (!item || typeof item !== 'object') {
        console.warn(`入库单数据项 ${index} 格式错误:`, item)
        return
      }

      const optType = item.optType
      const count = item.count

      // 验证optType和count
      if (optType === null || optType === undefined || count === null || count === undefined) {
        console.warn(`入库单数据项 ${index} 缺少必要字段:`, item)
        return
      }

      // 确保count是数字
      const validCount = parseInt(count) || 0

      switch(optType) {
        case 1:
          receiptStats.value.production = validCount
          break
        case 2:
          receiptStats.value.purchase = validCount
          break
        case 3:
          receiptStats.value.return = validCount
          break
        case 4:
          receiptStats.value.restore = validCount
          break
        default:
          console.warn(`未知的入库类型 optType: ${optType}`)
          break
      }
    })

    console.log('处理后的入库统计:', receiptStats.value)
    console.log('入库总数:', receiptTotal.value)
  } catch (error) {
    console.error('获取入库单统计数据失败:', error)
    // 保持默认值，不重置数据
  }
}

// 获取出库单统计数据
async function getShipmentOrderData() {
  try {
    const response = await shipmentOrderStatistics()
    console.log('出库单统计数据:', response)

    // 验证响应数据
    if (!response) {
      console.warn('出库单统计数据响应为空')
      return
    }

    if (response.code !== 200) {
      console.warn('出库单统计数据请求失败:', response.msg || '未知错误')
      return
    }

    if (!response.data) {
      console.warn('出库单统计数据为空')
      return
    }

    if (!Array.isArray(response.data)) {
      console.warn('出库单统计数据格式错误，期望数组格式')
      return
    }

    shipmentOrderData.value = response.data

    // 重置统计数据
    shipmentStats.value = {
      return: 0,        // 退货出库 optType: 1
      sales: 0,         // 销售出库 optType: 2
      production: 0     // 生产出库 optType: 3
    }

    // 遍历API返回的数据，根据optType更新对应的统计
    response.data.forEach((item, index) => {
      // 验证每个数据项
      if (!item || typeof item !== 'object') {
        console.warn(`出库单数据项 ${index} 格式错误:`, item)
        return
      }

      const optType = item.optType
      const count = item.count

      // 验证optType和count
      if (optType === null || optType === undefined || count === null || count === undefined) {
        console.warn(`出库单数据项 ${index} 缺少必要字段:`, item)
        return
      }

      // 确保count是数字
      const validCount = parseInt(count) || 0

      switch(optType) {
        case 1:
          shipmentStats.value.return = validCount
          break
        case 2:
          shipmentStats.value.sales = validCount
          break
        case 3:
          shipmentStats.value.production = validCount
          break
        default:
          console.warn(`未知的出库类型 optType: ${optType}`)
          break
      }
    })

    console.log('处理后的出库统计:', shipmentStats.value)
    console.log('出库总数:', shipmentTotal.value)
  } catch (error) {
    console.error('获取出库单统计数据失败:', error)
    // 保持默认值，不重置数据
  }
}

// 获取库存统计数据
async function getInventoryData() {
  try {
    const response = await queryWarehouseInventoryStatistics()
    console.log('库存统计数据:', response)

    // 验证响应数据
    if (!response) {
      console.warn('库存统计数据响应为空')
      return
    }

    if (response.code !== 200) {
      console.warn('库存统计数据请求失败:', response.msg || '未知错误')
      return
    }

    if (!response.data) {
      console.warn('库存统计数据为空')
      return
    }

    if (!Array.isArray(response.data)) {
      console.warn('库存统计数据格式错误，期望数组格式')
      return
    }

    inventoryData.value = response.data

    // 处理饼图数据
    const pieData = []

    response.data.forEach((item, index) => {
      // 验证每个数据项
      if (!item || typeof item !== 'object') {
        console.warn(`库存数据项 ${index} 格式错误:`, item)
        return
      }

      const warehouseName = item.warehouseName
      const inventoryCount = item.inventoryCount

      // 验证必要字段
      if (!warehouseName || inventoryCount === null || inventoryCount === undefined) {
        console.warn(`库存数据项 ${index} 缺少必要字段:`, item)
        return
      }

      // 确保数量是数字
      const validCount = parseInt(inventoryCount) || 0

      // 添加到饼图数据
      pieData.push({
        value: validCount,
        name: warehouseName
      })
    })

    // 更新饼图数据
    if (pieData.length > 0) {
      inventoryPieData.value = pieData
    } else {
      inventoryPieData.value = [{ value: 0, name: "暂无数据" }]
    }

    console.log('处理后的库存饼图数据:', inventoryPieData.value)
  } catch (error) {
    console.error('获取库存统计数据失败:', error)
    // 保持默认值，不重置数据
  }
}

// 获取订单趋势数据
async function getOrderTrendData(orderType, granularity, optType, orderStatus) {
  try {
    // 验证参数
    if (orderType === null || orderType === undefined) {
      console.warn('订单类型参数缺失')
      return null
    }

    const params = {
      date: moment().format('YYYY-MM-DD HH:mm:ss'),
      granularity: granularity || 0,
      orderType: orderType,
      optType: optType || 0,
      orderStatus: orderStatus || 1
    }

    console.log('趋势查询参数:', params)
    const response = await inAndOutOrderTrend(params)
    console.log('订单趋势数据:', response)

    // 验证响应数据
    if (!response) {
      console.warn('订单趋势数据响应为空')
      return null
    }

    if (response.code !== 200) {
      console.warn('订单趋势数据请求失败:', response.msg || '未知错误')
      return null
    }

    return response
  } catch (error) {
    console.error('获取订单趋势数据失败:', error)
    return null
  }
}

// 处理本月数据（按日统计）
function processMonthData(apiData) {
  try {
    const currentDate = new Date()
    const currentMonth = currentDate.getMonth()
    const currentYear = currentDate.getFullYear()
    const currentDay = currentDate.getDate() // 获取当前日期

    // 创建本月到今天为止的日期数据映射
    const monthDataMap = new Map()

    // 初始化本月到今天为止的日期为0，不包含未来日期
    for (let day = 1; day <= currentDay; day++) {
      const dateStr = moment(new Date(currentYear, currentMonth, day)).format('MM-DD')
      monthDataMap.set(dateStr, 0)
    }

    // 用API数据更新映射
    apiData.forEach(item => {
      if (item && item.time && item.count !== undefined) {
        try {
          // 解析时间格式 YYYY-MM-DD
          const date = moment(item.time, 'YYYY-MM-DD')
          if (date.isValid()) {
            // 只处理到今天为止的数据，过滤掉未来日期
            const today = moment().startOf('day')
            if (date.isSameOrBefore(today)) {
              const dateStr = date.format('MM-DD')
              const count = parseInt(item.count) || 0
              monthDataMap.set(dateStr, count)
            }
          }
        } catch (error) {
          console.warn('解析日期失败:', item.time, error)
        }
      }
    })

    // 转换为图表数据格式
    const xData = []
    const yData = []

    monthDataMap.forEach((count, dateStr) => {
      xData.push(dateStr)
      yData.push(count)
    })

    barChartData.value = {
      xData: xData,
      yData: yData
    }

    barXName.value = '日'
    console.log('处理后的本月数据:', barChartData.value)
  } catch (error) {
    console.error('处理本月数据失败:', error)
  }
}

// 处理本年数据（按月统计）
function processYearData(apiData) {
  try {
    const currentDate = new Date()
    const currentMonth = currentDate.getMonth() + 1 // 当前月份（1-12）
    const currentYear = currentDate.getFullYear()

    // 创建本年所有月份的数据映射
    const yearDataMap = new Map()

    // 初始化本年所有月份为0
    for (let month = 1; month <= currentMonth; month++) {
      const monthStr = moment(new Date(currentYear, month - 1, 1)).format('YYYY-MM')
      yearDataMap.set(monthStr, 0)
    }

    // 用API数据更新映射
    apiData.forEach(item => {
      if (item && item.time && item.count !== undefined) {
        try {
          // 解析时间格式 YYYY-MM
          const date = moment(item.time, 'YYYY-MM')
          if (date.isValid()) {
            // 只处理到当前月份为止的数据，过滤掉未来月份
            const currentDate = moment()
            if (date.isSameOrBefore(currentDate, 'month')) {
              const monthStr = date.format('YYYY-MM')
              const count = parseInt(item.count) || 0
              yearDataMap.set(monthStr, count)
            }
          }
        } catch (error) {
          console.warn('解析月份失败:', item.time, error)
        }
      }
    })

    // 转换为图表数据格式
    const xData = []
    const yData = []

    yearDataMap.forEach((count, monthStr) => {
      xData.push(monthStr)
      yData.push(count)
    })

    barChartData.value = {
      xData: xData,
      yData: yData
    }

    barXName.value = '月'
    console.log('处理后的本年数据:', barChartData.value)
  } catch (error) {
    console.error('处理本年数据失败:', error)
  }
}

// 获取销售出库数据（近7日）
async function getSalesOutboundData() {
  try {
    const data = await getOrderTrendData(1, 3, 2, 1)  // orderType=1:出库, granularity=3:近7日, optType=2:销售出库

    if (data && data.data && Array.isArray(data.data)) {
      console.log('销售出库数据:', data.data)
      processWeeklyData(data.data, lineDataOne)
    } else {
      console.warn('销售出库数据为空或格式错误')
    }
  } catch (error) {
    console.error('获取销售出库数据失败:', error)
  }
}

// 获取生产入库数据（近7日）
async function getProductionInboundData() {
  try {
    const data = await getOrderTrendData(0, 3, 1, 1)  // orderType=0:入库, granularity=3:近7日, optType=1:生产入库

    if (data && data.data && Array.isArray(data.data)) {
      console.log('生产入库数据:', data.data)
      processWeeklyData(data.data, lineDataTwo)
    } else {
      console.warn('生产入库数据为空或格式错误')
    }
  } catch (error) {
    console.error('获取生产入库数据失败:', error)
  }
}

// 获取移库数据（近7日）
async function getMovementData() {
  try {
    const data = await getOrderTrendData(2, 3, 0, 1)  // orderType=2:移库, granularity=3:近7日, optType=0:全部

    if (data && data.data && Array.isArray(data.data)) {
      console.log('移库数据:', data.data)
      processWeeklyData(data.data, lineDataThree)
    } else {
      console.warn('移库数据为空或格式错误')
    }
  } catch (error) {
    console.error('获取移库数据失败:', error)
  }
}

// 获取采购入库数据（近7日）
async function getPurchaseInboundData() {
  try {
    const data = await getOrderTrendData(0, 3, 2, 1)  // orderType=0:入库, granularity=3:近7日, optType=2:采购入库

    if (data && data.data && Array.isArray(data.data)) {
      console.log('采购入库数据:', data.data)
      processWeeklyData(data.data, lineDataFour)
    } else {
      console.warn('采购入库数据为空或格式错误')
    }
  } catch (error) {
    console.error('获取采购入库数据失败:', error)
  }
}

// 处理近7日数据
function processWeeklyData(apiData, chartDataRef) {
  try {
    // 获取近7天的日期
    const weekDates = []
    for(let i = 6; i >= 0; i--) {
      weekDates.push(moment().subtract(i, 'days').format('MM-DD'))
    }

    // 创建数据映射，初始化为0
    const dataMap = new Map()
    weekDates.forEach(date => {
      dataMap.set(date, 0)
    })

    // 用API数据更新映射
    apiData.forEach(item => {
      if (item && item.time && item.count !== undefined) {
        try {
          // 解析时间格式 YYYY-MM-DD
          const date = moment(item.time, 'YYYY-MM-DD')
          if (date.isValid()) {
            // 只处理到今天为止的数据，过滤掉未来日期
            const today = moment().startOf('day')
            if (date.isSameOrBefore(today)) {
              const dateStr = date.format('MM-DD')
              const count = parseInt(item.count) || 0
              if (dataMap.has(dateStr)) {
                dataMap.set(dateStr, count)
              }
            }
          }
        } catch (error) {
          console.warn('解析日期失败:', item.time, error)
        }
      }
    })

    // 转换为图表数据格式
    const yData = []
    weekDates.forEach(date => {
      yData.push(dataMap.get(date))
    })

    // 更新图表数据
    chartDataRef.value = {
      xData: weekDates,
      yData: yData
    }

    console.log('处理后的周数据:', chartDataRef.value)
  } catch (error) {
    console.error('处理周数据失败:', error)
  }
}

// 定时刷新数据（每5分钟刷新一次）
let autoRefreshTimer = null

function startAutoRefresh(interval = 300000) { // 默认5分钟 = 300000毫秒
  // 清除之前的定时器
  if (autoRefreshTimer) {
    clearInterval(autoRefreshTimer)
  }

  // 启动新的定时器
  autoRefreshTimer = setInterval(() => {
    console.log('执行自动刷新...')
    refreshAllData()
  }, interval)

  console.log(`自动刷新已启动，间隔：${interval / 1000}秒`)
}

// 停止自动刷新
function stopAutoRefresh() {
  if (autoRefreshTimer) {
    clearInterval(autoRefreshTimer)
    autoRefreshTimer = null
    console.log('自动刷新已停止')
  }
}

// 刷新所有数据
async function refreshAllData() {
  try {
    console.log('开始刷新所有数据...')

    const results = await Promise.allSettled([
      getReceiptOrderData(),
      getShipmentOrderData(),
      getInventoryData(),
      getWeeklyTrendData()
    ])

    // 检查每个请求的结果
    results.forEach((result, index) => {
      const apiNames = ['入库单统计', '出库单统计', '库存统计', '近7日趋势']
      if (result.status === 'rejected') {
        console.error(`${apiNames[index]}刷新失败:`, result.reason)
      } else {
        console.log(`${apiNames[index]}刷新成功`)
      }
    })

    console.log('所有数据刷新完成')
  } catch (error) {
    console.error('刷新数据失败:', error)
  }
}


</script>


<style scoped>
.app-container {
  min-height: calc(100vh - 84px);
  padding: 12px 12px 0 12px;
}

.top-item-box {
  height: 160px;
  background: #fff;
  margin-bottom: 12px;
  border-radius: 12px;
  color: #fff;
  padding: 16px;
}

.item-box-one {
  background: linear-gradient(30deg, #1a94db, #4db1eb, #7acaf9);
  box-shadow: 0 4px 12px #8ed2fa;
}

.item-box-two {
  background: linear-gradient(30deg, #c7a327, #d5ba47, #e3cf65);
  box-shadow: 0 4px 12px #ece7cd;
}

.item-box-three {
  background: linear-gradient(30deg, #6365f7, #9177f1, #cd8ee9);
  box-shadow: 0 4px 12px #dcc9e6;
}

.item-box-four {
  background: linear-gradient(30deg, #ed3a60, #f1557a, #f67da0);
  box-shadow: 0 4px 12px #e7cfd6;
}

.box-card {
  height: 400px;
  margin-bottom: 12px;
  background-color: #fff;
  border-color: #ebe6f5;
}

.box-card >>> .el-card__body {
  height: 100%;
}

.card-title {
  font-weight: bold;
  height: 30px;
  display: flex;
  align-items: center;
}

.card-title::before {
  content: '';
  height: 70%;
  width: 5px;
  background: #3671e8;
  margin-right: 8px;
}

</style>
